import React from 'react';
import { Button, Radio, Icon } from 'antd';


export default class ButtonSize extends React.Component {
  state = {
    size: 'large',
  };

  handleSizeChange = e => {
    this.setState({ size: e.target.value });
  };

  render() {
    return (
      <div>
        <style>
          {`
           .ant-btn {
            margin-right: 8px;
            margin-bottom: 12px;
        }
          `}
        </style>
        <Radio.Group value={this.state.size} onChange={this.handleSizeChange}>
          <Radio.Button value="large">Large</Radio.Button>
          <Radio.Button value="default">Default</Radio.Button>
          <Radio.Button value="small">Small</Radio.Button>
        </Radio.Group>
        <br />
        <br />

        <Button type="primary" size={this.state.size}> Primary </Button>
        <Button size={this.state.size}>Normal</Button>
        <Button type="dashed" size={this.state.size}> Dashed </Button>
        <Button type="danger" size={this.state.size}> Danger </Button>
        <Button type="link" size={this.state.size}> Link </Button>
        <br />

        <Button type="primary" icon="download" size={this.state.size} />
        <Button type="primary" shape="circle" icon="download" size={this.state.size} />
        <Button type="primary" shape="round" icon="download" size={this.state.size} />
        <Button type="primary" shape="round" icon="download" size={this.state.size}> Download </Button>
        <Button type="primary" icon="download" size={this.state.size}> Download </Button>
        <br />
        
        <Button.Group size={this.state.size}>
          <Button type="primary"> <Icon type="left" /> Backward </Button>
          <Button type="primary"> Forward <Icon type="right" /> </Button>
        </Button.Group>
      </div>
    );
  }
}